  $(function () {
    window.keyword="";
    window.pageNum=1;
    window.pageSize=5;

    /*显示数据*/
showPage();
/*绑定查询按钮单击时间*/
$("#btnclick").click(function () {
    var keyword=$("#keywordInput").val();
    if(keyword==''){
    layer.msg("请输入查询条件")
        return;
    }else{
    window.keyword=keyword;
        showPage()
    }
})

      /*角色单击事件全选*/
   $("#summaryBox").click(function () {
       var currentStatus=this.checked;
       $(".itemBox").prop("checked",currentStatus);
   })

      /*绑定批量删除*/
      $("#batchRemoveBtn").click(function () {

          // 获取被选中的itemBox数组长度
          var length = $(".itemBox:checked").length;
          // 如果长度为0，说明没有选择itemBox
          if(length == 0) {
              layer.msg("请至少选择一条！");
              return ;
          }
      /*获取id*/
          /*清空数组*/
          window.roleIdArray = new Array();
          $(".itemBox:checked").each(function () {
              // 通过checkbox的roleid属性获取roleId值
              var roleId = $(this).attr("roleid");
              // 存入数组
              window.roleIdArray.push(roleId);
          })

          // 调用函数打开模态框
          showRemoveConfirmModal();
      })

      /*删除*/
      $("#confirmModalBtn").click(function () {
          /*发送ajax请求*/
          var requestBody = JSON.stringify(window.roleIdArray);
          $.ajax({
              url:"/role/batch/remove",
              type:"post",
              data:requestBody,
              contentType:"application/json;charset=UTF-8",
              dataType:"json",
              success:function (response) {
                  var result = response.result;
                  if(result == "SUCCESS") {
                      layer.msg("操作成功！");
                      // 如果删除成功，则重新调用分页方法
                      showPage();
                  }
                  if(result == "FAILED") {
                      layer.msg(response.message);
                  }
                  // 不管成功还是失败，都需要关掉模态框
                  $("#confirmModal").modal("hide");

              }

          })
      })

      /*单条数据删除*/
      //单条删除
      $('#roleTableBody').on("click",".removeBtn1two",function () {
          // 获取当前记录的roleId
          var roleId = $(this).attr("roleId");
          // 存入全局变量数组
          window.roleIdArray = new Array();
          window.roleIdArray.push(roleId);
          // 打开模态框（后续所有操作都和批量删除一样）
          showRemoveConfirmModal();
      });


      /*绑定添加*/
      $("#addBtn").click(function () {
          $("#addModal").modal("show");
      })


      $("#addModalBtn").click(function () {
          // 1.收集文本框内容
          var roleName = $.trim($("#roleNameInput").val());
          if(roleName == null || roleName == "") {
              layer.msg("请输入有效角色名称！");
              return ;
          }

          $.ajax({
              url:"/role/save/role",
              type:"post",
              data:{
                  "roleName":roleName
              },
              dataType:"json",
              success:function (response) {
                  var result = response.result;
                  if(result == "SUCCESS") {
                      layer.msg("操作成功！");

                      showPage();
                      // 不管成功还是失败，关闭模态框
                      $("#addModal").modal("hide");

                      // 清理本次在文本框填写的数据
                      $("#roleNameInput").val("");
                  }else {
                      layer.msg(response.message);
                  }
              }
          });
      })


      //修改
      $("#roleTableBody").on("click",".editBtn",function(){

          // 1.获取当前按钮的roleId
          window.roleId = $(this).attr("roleId");

          // 2.获取当前按钮所在行的roleName
          var roleName = $(this).parents("tr").children("td:eq(2)").text();

          // 3.修改模态框中文本框的value值，目的是在显示roleName
          $("#roleNameInputEdit").val(roleName);

          // 4.打开模态框
          $("#editModal").modal("show");
      });

      /*更新*/
      //确认修改
      $("#editModalBtn").click(function () {
          // 1.获取文本框值
          var roleName = $.trim($("#roleNameInputEdit").val());

          if(roleName == null || roleName == "") {
              layer.msg("请输入有效角色名称！");

              return ;
          }
          $.ajax({
              url:"/role/update/role",
              type:"post",
              data:{
                  "id":window.roleId,
                  "name":roleName
              },
              dataType:"json",
              success:function (response) {
                  var result = response.result;
                  if(result == "SUCCESS") {
                      layer.msg("操作成功！");
                      // 3.操作成功重新分页
                      showPage();
                  }
                  if(result == "FAILED") {
                      layer.msg(response.message);
                  }

                  // 4.不管成功还是失败，关闭模态框
                  $("#editModal").modal("hide");
              }
          });
      });

  })

/*显示数据*/
function showPage() {
    /*发送ajax请求,渲染数据*/
    /*你点开浏览器*/
    $.ajax({
        url:"/role/search/by/keyword",
        type:"post",
        dataType:"JSON",
        data:{
            "keyword":window.keyword,
            "pageNum":window.pageNum,
            "pageSize":window.pageSize

        },
        success:function (ajaxResult) {
            if(ajaxResult.result=="SUCCESS"){
            /*先清空原来的数据*/
            $(".table-bordered").empty();
            /*获取数据*/
            var list=ajaxResult.data.list;
            if(list.length>0){
            /*有数据*/
            for(var i=0;i<list.length;i++){

                var role = list[i];

                //数据
                var numberTd = "<td>"+(i+1)+"</td>";
                var checkBoxTd = "<td><input class='itemBox' roleid='"+list[i].id+"' type='checkbox'></td>";
                var roleNameTd = "<td>"+role.name+"</td>";

                //按钮
                var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
                var pencilBtn = "<button roleId='"+role.id+"' type='button' class='editBtn' btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>";
                var removeBtn = "<button roleId='"+role.id+"' type='button' class='btn btn-danger btn-xs removeBtn1two''><i class=' glyphicon glyphicon-remove'></i></button>";

                var btnTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";

                var tr = "<tr>"+numberTd+checkBoxTd+roleNameTd+btnTd+"</tr>";

                // 将前面拼好的HTML代码追加到#roleTableBody中
                $(".table-bordered").append(tr);
            }

            /*调用分页*/
                initPagination(ajaxResult.data);

            }else{
            /*没数据*/
            var $tr=$('<tr></tr>');
            var $td=$('<td colspan="4">对不起没有查询到数据</td>');
            tr.append($td);
            $(".table-bordered").append($tr)
            }
            }else{
                layer.msg(result.message);
            }
        }

        /*绑定单条删除*/


    })
}


/*分页导航*/
  function initPagination(pageInfo) {
      // 声明变量存储总记录数
      var totalRecord =pageInfo.total;
      // 声明变量存储分页导航条显示时的属性设置
      var paginationProperties = {
          num_edge_entries : 3,        //边缘页数
          num_display_entries : 5,      //主体页数
          callback : pageselectCallback, //回调函数
          items_per_page :window.pageSize,    //每页显示数据数量，就是pageSize
          current_page :window.pageNum-1,//当前页页码
          prev_text : "上一页",       //上一页文本
          next_text : "下一页"        //下一页文本
      };
      // 显示分页导航条
      $(".pagination").pagination(totalRecord, paginationProperties);



  }

  // 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
  function pageselectCallback(pageIndex, jq) {
      // pageIndex从0开始，pageNum从1开始
      var pageNum = pageIndex + 1;
      window.pageNum=pageNum;/*更新当前页*/
      var keyword=window.keyword;
      // 跳转页面
      /*window.location.href = "/admin/query/for/search?pageNum="+pageNum+"&keyword=${param.keyword}";*/
      showPage();
      return false;
  }
  
  
  function showRemoveConfirmModal() {
      $("#confirmModalTableBody").empty();
      $("#confirmModal").modal("show");
      /*把角色数组转换为数组*/
      var requestBody = JSON.stringify(window.roleIdArray);
      /*显示要删除的数据*/
      var ajaxResult = $.ajax({
          url:"/role/get/list/by/id/list",
          type:"post",
          data:requestBody,
          contentType:"application/json;charset=UTF-8",
          dataType:"json",
          success:function (ajaxResult) {
              if(ajaxResult.result == "SUCCESS") {
                  // 5.如果成功，显示数据
                  // 3.清空#confirmModalTableBody
                  $("#confirmModalTableBody").empty();
                  // 4.填充#confirmModalTableBody
                  var roleList =ajaxResult.data;
                  for(var i=0;i<ajaxResult.data.length;i++){
                      var list=ajaxResult.data;
                      var $tr=$('<tr></tr>')
                      var $td=$('<td>+(i+1)+</td>')
                      var $td2=$('<td>+[i].name+</td>')
                      $tr.append($td)
                      $tr.append($td2)
                      $("#confirmModalTableBody").append($tr);
                  }
              } else{
                  layer.msg(ajaxResult.message);
                  return null;
              }
          }
      });
  }